<template>
  <div class="">
    <van-nav-bar @click-left="$router.back()" left-arrow fixed>
      <template #title>
        <van-search placeholder="搜索商品" />
      </template>
      <template #right>
        <van-icon name="share-o" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active">
      <main>
        <van-tab title="商品">
          <img
            class="img"
            src="../../assets/in/uer.png"
            alt=""
            v-if="type == 1 && type == 2"
          />
          <img class="img" src="../../assets/in/uer2.png" alt="" v-else />
          <header>
            <div class="price" v-if="type == 1">￥13.00</div>
            <div class="price" v-else-if="type == 2">￥43.00</div>
            <div class="price" v-else-if="type == 3">￥93.00</div>
            <div class="price" v-else>￥20.00</div>
            <div class="title">
              APP开发
              <span>新品上市</span>
              <span v-show="type == 1">7.5折</span>
              <span v-show="type == 2">8.5折</span>
              <span v-show="type == 3">6.5折</span>
              <span v-show="type == 4">7.5折</span>
              <span>包邮</span>
            </div>
            <p v-if="type == 1">霸屏百度首页，你还差一个优秀的SEO优化</p>
            <p v-else-if="type == 2">霸屏百度首页，你还差一个优秀的快排系统</p>
            <p v-else-if="type == 3">霸屏百度首页，你还差一个优秀的快排系统</p>
            <p v-else>霸屏百度首页，你还差一个优秀的SEO优化</p>
            <div class="foot">
              <span>运费：免运费</span>
              <span v-show="type == 1">10850 月售</span>
              <span v-show="type == 2">20850 月售</span>
              <span v-show="type == 3">9850 月售</span>
              <span v-show="type == 4">8850 月售</span>
            </div>
            <div class="item">
              <div class="left">配送至</div>
              <div class="center">
                <van-icon name="location-o" /> &nbsp; 广东深圳
              </div>
              <div class="right">
                <van-icon name="arrow" />
              </div>
            </div>
            <div class="item">
              <div class="left">服务</div>
              <div class="center">
                正品保证 &nbsp;&nbsp;&nbsp; &nbsp;急速退款
              </div>
              <div class="right">
                <van-icon name="arrow" />
              </div>
            </div>
            <div class="item">
              <div class="left">选择</div>
              <div class="center">
                <p>选择 颜色分类</p>
                <div class="sec">
                  <div class="color"></div>
                  <div class="color"></div>
                  <div class="color"></div>
                  <div class="color"></div>
                  <span>共12个颜色分类可选</span>
                </div>
              </div>
              <div class="right">
                <van-icon name="arrow" />
              </div>
            </div>
            <div class="item">
              <div class="left">参数</div>
              <div class="center">颜色分类</div>
              <div class="right">
                <van-icon name="arrow" />
              </div>
            </div>
          </header>
          <div class="content">
            <h3>— 商品详情 —</h3>
            <p class="p">
              开发一个商城APP要多少钱？都包含哪些费用？”对于大部分打算开发APP的
              人来说，这个问题应该是最关心的问题了。这也是情理之中，从用户的角度出
              发，最关心的问题肯定是跟钱有关的问题了，只有知道开发费用以后，心中才
              能有一个答题的预估，知道自己的资金是否足以支撑整个开发。
            </p>
            <p class="p">
              但是，关于APP开发的价格往往也是最难以确定的，如果你去问市面上那些大
              型的、靠谱的开发公司，他们都是要先问你的需求，然后才能给出报价。这个
              时候给出的价格也往往只是个预估价格，具体的价格还需要等功能确定下来以
              后才能确定。
            </p>
            <h3>— 售后保障 —</h3>
            <h4>
              <img src="../../assets/in/mai.png" alt="" />
              卖家服务
            </h4>
            <div class="conta"></div>
            <h4>
              <img src="../../assets/in/you.png" alt="" />
              正品行货
            </h4>
            <div class="conta">
              <p>
                优联互通商城向您保证所售商品均为正品行货，商城商品开具机打发票或
                电子发票。
              </p>
            </div>
            <h4>
              <img src="../../assets/in/mai.png" alt="" />
              平台承诺
            </h4>
            <div class="conta">
              <p>
                优联互通卖家销售并发货的商品，由平台卖家提供发票和相应的售后服务
                请您放心购买！
              </p>
              <p>
                注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些
                附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一
                致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。
              </p>
            </div>
          </div>
          <div class="recommend">
            <h3>— 推荐商品 —</h3>
            <div class="container">
              <div class="item" @click="$router.push('/indexDetail?type=1')">
                <img src="../../assets/in/uer.png" alt="" />
                <div class="dsc">
                  <p>选定的seo优化关键词指...</p>
                  <div class="price">￥ 13.00</div>
                  <div class="foot">
                    <span>成交2万+</span>
                    <span>07-22上新</span>
                  </div>
                </div>
              </div>
              <div class="item" @click="$router.push('/indexDetail?type=2')">
                <img src="../../assets/in/uer.png" alt="" />
                <div class="dsc">
                  <p>专业APP开发...</p>
                  <div class="price">￥ 43.00</div>
                  <div class="foot">
                    <span>成交4万+</span>
                    <span>07-21上新</span>
                  </div>
                </div>
              </div>
              <div class="item" @click="$router.push('/indexDetail?type=3')">
                <img src="../../assets/in/uer2.png" alt="" />
                <div class="dsc">
                  <p>APP定制开发...</p>
                  <div class="price">￥ 93.00</div>
                  <div class="foot">
                    <span>成交5万+</span>
                    <span>07-24上新</span>
                  </div>
                </div>
              </div>
              <div class="item" @click="$router.push('/indexDetail?type=4')">
                <img src="../../assets/in/uer2.png" alt="" />
                <div class="dsc">
                  <p>选定的seo优化关键词指...</p>
                  <div class="price">￥ 20.00</div>
                  <div class="foot">
                    <span>成交1万+</span>
                    <span>07-20上新</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="详情">详情</van-tab>
        <van-tab title="售后">售后</van-tab>
        <van-tab title="推荐">推荐</van-tab>
      </main>
    </van-tabs>

    <van-goods-action>
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-icon icon="star-o" text="收藏" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        type="warning"
        text="洽谈议价"
        icon="comment"
        color="#3988ff"
      />
      <van-goods-action-button
        type="danger"
        text="立即下单"
        icon="column"
        color="#f9572c"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      active: 0,
      type: 1,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.type = this.$route.query.type;
  },
};
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.van-search {
  padding: 0;
}
/deep/.van-field--disabled .van-field__label {
  color: #333333;
}
.van-tabs {
  padding-top: 46px;
}
main {
  height: calc(100vh - 146px);
  overflow-y: scroll;
  background-color: #f6f6f6;
  .img {
    width: 100%;
    height: 289px;
  }
  header {
    background-color: #fff;
    padding: 15px;
    .price {
      font-size: 16px;
      font-weight: 700;
      color: #f9572c;
    }
    .title {
      margin-top: 12px;
      font-size: 16px;
      font-weight: 700;
      color: #333333;
      display: flex;
      align-items: center;
      span {
        margin-left: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 18px;
        border: 1px solid #f9572c;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        color: #f9572c;
        &:first-of-type {
          margin-left: 63px;
          background-color: #fdf7f2;
          border-radius: 10px;
          font-size: 12px;
          color: #ff5000;
          width: 83px;
          height: 20px;
        }
      }
    }
    p {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      margin: 15px 0;
    }
    .foot {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: #999999;
      margin-bottom: 15px;
    }
    .item {
      padding: 15px 0;
      display: flex;
      font-size: 14px;

      .left {
        width: 70px;
        color: #333333;
      }
      .center {
        flex: 1;
        p {
          margin: 0 0 10px 0;
        }
        .sec {
          display: flex;

          .color {
            width: 25px;
            height: 25px;
            background-color: #ffb1b1;
            border-radius: 5px;
            &:nth-of-type(2) {
              margin-left: 10px;
              background-color: #ffda81;
            }
            &:nth-of-type(3) {
              margin-left: 10px;
              background-color: #b0d7ff;
            }
            &:nth-of-type(4) {
              margin-left: 10px;
              background-color: #beffd0;
            }
          }
          span {
            margin-left: 10px;
            width: 110px;
            height: 20px;
            background-color: #f8f8f8;
            border-radius: 5px;
            font-size: 10px;
            color: #999999;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
      .right {
        width: 10px;
      }
    }
  }
  .content {
    background-color: #fff;
    margin-top: 10px;
    padding: 0 15px;
    h3 {
      padding: 16px 0;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #333333;
    }
    .p {
      font-size: 10px;
      text-align: left;
      color: #666666;
      line-height: 20px;
      &:last-of-type {
        margin-top: 15px;
      }
    }
    h4 {
      font-size: 12px;
      font-weight: 700;
      text-align: left;
      color: #ff4848;
      display: flex;
      align-items: center;
      img {
        width: 15px;
        height: 16px;
        margin-right: 10px;
      }
    }
    .conta {
      padding: 12px 0;
      p {
        font-size: 10px;
        text-align: left;
        color: #666666;
        line-height: 20px;
        padding-left: 25px;
      }
    }
  }
  .recommend {
    padding: 5px 15px 15px;
    h3 {
      padding: 16px 0 0;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #333333;
    }
    .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        margin-top: 15px;
        background-color: #ffffff;
        border-radius: 4px;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        width: 48%;
        img {
          width: 100%;
          height: 150px;
        }
        .dsc {
          padding: 10px 12px;
          background-color: #fff;
          p {
            text-align: center;
            font-size: 11px;
            text-align: center;
            color: #333333;
          }
          .price {
            margin: 11px 0 9px;
            font-size: 18px;
            font-weight: 700;
            color: #f9572c;
          }
          .foot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 9px;
            color: #9d9fab;
          }
        }
      }
    }
  }
}
.van-goods-action-button--first {
  border-radius: 999px;
  width: 80px;
  height: 35px;
}
.van-goods-action-button--last {
  margin-left: 10px;
  border-radius: 999px;
  width: 80px;
  height: 35px;
}
.van-goods-action-button {
  font-size: 12px;
}
</style>